<template>
	<el-page-header icon="el-icon-arrow-left" @back="$router.replace('/')" content="入住登记"></el-page-header>

	<el-divider>订单信息</el-divider>
	<el-form :model="formData" ref="myForm" label-width="100px">
		<el-form-item label="预定人手机" prop="phone">
			<el-input v-model="formData.phone" readonly></el-input>
		</el-form-item>
		<el-form-item label="预订人称呼" prop="orderName">
			<el-input v-model="formData.orderName" readonly></el-input>
		</el-form-item>
		<el-form-item label="预定方式" prop="orderType">
			<el-input v-model="orderTypeName" readonly></el-input>
		</el-form-item>
		<el-form-item label="入住日期">
			<el-input v-model="formData.checkInTime" readonly></el-input>
		</el-form-item>
		<el-form-item label="离店日期">
			<el-input v-model="formData.checkOutTime" readonly></el-input>
		</el-form-item>
		<el-form-item label="下单时间">
			<el-input v-model="formData.insertTime" readonly></el-input>
		</el-form-item>

		<el-divider>订单项信息</el-divider>

		<el-form inline v-for="(item, index) in formData.orderbillItems" label-width="100px">
			<el-form-item label="预定房型">
				<el-input v-model="item.roomTypeName" readonly></el-input>
			</el-form-item>
			<el-form-item label="预定价格(元)">
				<el-input v-model="item.price" readonly></el-input>
			</el-form-item>
			<el-form-item label="预定数量">
				<el-input v-model="item.quantity" readonly></el-input>
			</el-form-item>
			<el-form-item label="小计(元)">
				<el-input v-model="item.subTotalPrice" readonly></el-input>
			</el-form-item>
		</el-form>
		<el-form-item label="房费总计(元)">
			<el-input v-model="formData.totalPrice" readonly></el-input>
		</el-form-item>

		<el-divider>入住信息登记及押金</el-divider>
		<el-form :model="checkInFormData" :rules="rules" label-width="100px" ref="checkInForm">
			<div v-for="(item, index) in checkInFormData.idCards">
				<el-form-item :label="'身份证号' + (index + 1)" required>
					<el-input v-model="checkInFormData.idCards[index]"></el-input>
				</el-form-item>
			</div>
			<el-form-item label="押金(元)" prop="depositPrice">
				<el-input-number :step="50" v-model="checkInFormData.depositPrice"></el-input-number>
			</el-form-item>
		</el-form>

		<el-divider></el-divider>

		<el-form-item>
			<el-button type="primary" @click="submitForm('checkInForm')">提交</el-button>
			<el-button @click="$router.back()">取消</el-button>
		</el-form-item>
	</el-form>
</template>

<script>
	import {
		ElMessage
	} from 'element-plus'


	export default {
		data() {
			return {
				formData: {
					phone: '',
					orderName: '',
					orderType: 1,
					checkInTime: '',
					checkOutTime: '',
					orderbillItems: []
				},
				checkInFormData: {
					idCards: [],
					depositPrice: 100.00
				},
				rules: {
					depositPrice: [{
						required: true,
						message: '请输入押金',
						trigger: 'blur'
					}]
				}

			}
		},
		methods: {
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
						if (!valid) return false;
						this.checkInFormData.orderbillId = this.formData.id;
						this.axios.post('orderbill/checkin/', this.checkInFormData)
							.then(resp => {
								if (!resp.data.flag) {
									ElMessage.error(resp.data.msg);
									return;
								}
								this.$alert('分配的房间号: ' + resp.data.data.roomNums, '预定成功', {
									confirmButtonText: '确定',
									showClose: false,
									callback: action => {
										this.$router.replace('/');
									}
								});
							});
				});
			}
		},
		computed: {
			orderTypeName() {
				switch (this.formData.orderType) {
					case 1:
						return '前台办理';
					case 2:
						return '电话预约';
					default:
						return '网上预约';
				}
			}
		},
		created() {
			this.axios.get('orderbill/checkin/' + this.$route.params.orderId)
				.then(resp => {
					if (!resp.data.flag) {
						ElMessage.error(resp.data.msg);
						return;
					}
					this.formData = resp.data.data.info;
					let idCardslen = this.formData.orderbillItems.reduce((prev, cur) => {
						return prev + cur.quantity;
					}, 0);
					this.checkInFormData.idCards = new Array(idCardslen)
				});
		}
	}
</script>

<style scoped>

</style>
